<template>
    <div class="list-wrap">
        <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <van-cell v-for="item in list" :key="item.appointmentId" class="van-cell" :border="false">
            <template #title>
                <section class="bdgray-bot">
                    <div class="order">预约时间：{{item.appointmentMentTime}}</div>
                </section>
                <section style="margin-top:10px;">
                    <div>客户姓名:</div>
                    <div>{{item.appointmentName}}</div>
                </section>
                <section>
                    <div>客户电话:</div>
                    <div>{{item.appointmentPhone}}</div>
                </section>
                <section>
                    <div>车型:</div>
                    <div>{{item.appointmentModels}}</div>
                </section>
                <section>
                    <div>车牌:</div>
                    <div>{{item.appointmentNumber}}</div>
                </section>
                <!-- <section>
                    <div>预约时间:</div>
                    <div>{{item.appointmentMentTime}}</div>
                </section> -->
                <!-- <section>
                    <div>创建时间:</div>
                    <div><time>{{item.appointmentCreateTime}}</time></div>
                </section> -->
                <section>
                    <div>服务项目:</div>
                    <div>宝路德玻璃水1.8L</div>
                </section>
                <section>
                    <div>服务类型:</div>
                    <div>{{appointmentTypeList[item.appointmentType]}}</div>
                </section>
                <!-- <section class="bdgray-top">
                    <div class="black">金额:</div>
                    <div class="money">￥0</div>
                </section> -->
            </template>
        </van-cell>
        
    </van-list>
    </div>
</template>
<script setup>
    import {defineEmit, defineProps, reactive} from 'vue'
    //本组件的状态
    const state = reactive({
        list:[],
        loading: false,
        finished: false,
    });
    const appointmentTypeList = [
        ,'三电维保','保养','维修','洗车'
    ]

    //event
    const emit = defineEmit(['onSearch'])
    //props
    const props = defineProps({
        list:Array,
        total:Number
    })
    const onLoad = () => {
        console.log('onload....')
        // 异步更新数据
        emit('onSearch')
        // 加载状态结束
        state.loading = false;
        if(props.list.length>=props.total){
            state.finished = true;
        }
    };
</script>
<style lang="scss" scoped>
.list-wrap{
    padding: .9375rem;
    background-color: #f1f5f8;
}
.van-cell{
    margin-bottom: .9375rem;
    border-radius: .625rem;
    section{   
        display: flex; 
        padding: .3125rem 0;
        &.bdgray-bot{
            border-bottom: 1px solid #E5EBEF;
            padding: .3125rem 0;
        }
        &.bdgray-top{
            border-top: 1px solid #E5EBEF;
            padding-top: .625rem;
        }
        div{
            flex:1;
            margin-bottom: .3125rem;
            font-size: .875rem /* 14/16 */;
            text-align: left;
            &.order,&.black{
                text-align: left !important;
                font-size: 1rem !important;
                color: #101D34 !important;
            }
            
            &:first-of-type{
                color: #49596D;
            }
            &:last-child{
                text-align: right;
                font-size: .875rem /* 12/16 */;
            }
            &.money{
                color: red;
            }
        }
    }
}
</style>
<style scoped>

</style>